<template>
  <div class="create-problem-set">
    <div class="content-wrapper">
      <!-- 面包屑导航 -->
      <div class="breadcrumb-section">
        <el-breadcrumb :separator-icon="ArrowRight">
          <el-breadcrumb-item :to="{ path: '/admin/problemSet' }">题目集管理</el-breadcrumb-item>
          <el-breadcrumb-item>创建题目集</el-breadcrumb-item>
        </el-breadcrumb>
      </div>

      <el-card class="create-card">
        <template #header>
          <div class="card-header">
            <el-icon class="header-icon"><FolderAdd /></el-icon>
            <h3 class="card-title">创建题目集</h3>
            <p class="card-subtitle">创建一个题目集来组织和管理编程题目</p>
          </div>
        </template>

        <el-form ref="formRef" :model="form" :rules="rules" label-position="top" class="create-form">
          <!-- 基本信息 -->
          <div class="form-section">
            <div class="section-title">
              <el-icon><Document /></el-icon>
              <span>基本信息</span>
            </div>

            <el-form-item prop="name">
              <template #label>
                <span class="form-label">
                  题目集名称
                  <span class="required-mark">*</span>
                </span>
              </template>
              <el-input v-model="form.name" placeholder="例如：Python入门50题、算法基础训练" maxlength="200" show-word-limit clearable size="large" />
            </el-form-item>

            <el-form-item prop="description">
              <template #label>
                <span class="form-label">描述说明</span>
              </template>
              <el-input v-model="form.description" type="textarea" placeholder="请描述题目集的学习目标、适用人群、内容范围等（可选）" :rows="4" maxlength="1000" show-word-limit clearable />
            </el-form-item>
          </div>

          <!-- 可见性设置 -->
          <div class="form-section">
            <div class="section-title">
              <el-icon><View /></el-icon>
              <span>可见性设置</span>
            </div>

            <el-form-item prop="isPublic">
              <el-radio-group v-model="form.isPublic" class="visibility-group">
                <el-radio :value="true" size="large">
                  <div class="radio-wrapper">
                    <el-icon class="radio-icon"><Unlock /></el-icon>
                    <div class="radio-content">
                      <span class="radio-title">公开</span>
                      <p class="radio-desc">所有人可见，可通过搜索发现</p>
                    </div>
                  </div>
                </el-radio>
                <el-radio :value="false" size="large">
                  <div class="radio-wrapper">
                    <el-icon class="radio-icon"><Lock /></el-icon>
                    <div class="radio-content">
                      <span class="radio-title">私有</span>
                      <p class="radio-desc">仅成员可见，需通过邀请码加入</p>
                    </div>
                  </div>
                </el-radio>
              </el-radio-group>
            </el-form-item>

            <!-- 私有题目集的邀请码设置 -->
            <el-collapse-transition>
              <div v-if="!form.isPublic" class="invite-settings">
                <el-alert title="邀请码将在题目集创建后自动生成" type="info" :closable="false" show-icon>
                  <template #default>创建成功后，系统会生成一个永久邀请码。你可以在题目集管理页面重新生成临时邀请码。</template>
                </el-alert>
              </div>
            </el-collapse-transition>
          </div>

          <el-divider />

          <!-- 操作按钮 -->
          <div class="form-actions">
            <el-button @click="handleCancel" size="large" class="cancel-btn">
              <el-icon><Close /></el-icon>
              取消
            </el-button>
            <el-button type="primary" @click="handleSubmit" :loading="creating" size="large" class="submit-btn">
              <el-icon v-if="!creating"><Check /></el-icon>
              {{ creating ? "创建中..." : "创建题目集" }}
            </el-button>
          </div>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue"
import { useRouter } from "vue-router"
import { useProblemSetsStore } from "@/stores/modules/problem-set"
import { ElMessage } from "element-plus"
import { ArrowRight, Check, Close, Document, FolderAdd, Lock, Unlock, View } from "@element-plus/icons-vue"

const router = useRouter()
const problemSetsStore = useProblemSetsStore()

// 表单数据
const formRef = ref(null)
const creating = ref(false)

const form = reactive({
  name: "",
  description: "",
  isPublic: true, // 默认公开
  problemIds: [] // 题目ID列表（后续在详情页添加）
})

// 表单验证规则
const rules = {
  name: [
    { required: true, message: "请输入题目集名称", trigger: "blur" },
    { min: 2, max: 200, message: "名称长度在 2 到 200 个字符", trigger: "blur" }
  ],
  description: [{ max: 1000, message: "描述不能超过 1000 个字符", trigger: "blur" }]
}

// 提交表单
const handleSubmit = async () => {
  if (!formRef.value) return

  try {
    const valid = await formRef.value.validate()
    if (!valid) return

    creating.value = true
    const result = await problemSetsStore.createProblemSet(form)

    if (result.code === 200) {
      ElMessage.success({
        message: form.isPublic ? "题目集创建成功！" : "题目集创建成功！邀请码已生成",
        duration: 2000
      })

      // 跳转到详情页
      router.push(`/problemSet/${result.data.id}`)
    }
  } catch (error) {
    ElMessage.error(error.response?.data?.message || "创建失败，请重试")
  } finally {
    creating.value = false
  }
}

// 取消创建
const handleCancel = () => {
  router.back()
}
</script>

<style lang="scss" scoped>
@use "@/styles/base/variables" as *;
@use "@/styles/base/mixins" as *;

.create-problem-set {
  width: 100%;
  min-height: 100vh;
  background: $bg-color-layout;
  padding: $spacing-lg $spacing-xl;

  // 内容容器
  .content-wrapper {
    max-width: 900px;
    margin: 0 auto;
  }

  // 面包屑导航
  .breadcrumb-section {
    margin-bottom: $spacing-lg;

    :deep(.el-breadcrumb) {
      font-size: $font-size-sm;

      .el-breadcrumb__item {
        .el-breadcrumb__inner {
          color: $color-text-tertiary;
          font-weight: $font-weight-normal;
          transition: color $transition-fast;

          &:hover {
            color: $color-primary;
          }
        }

        &:last-child .el-breadcrumb__inner {
          color: $color-text-primary;
          font-weight: $font-weight-medium;
        }
      }
    }
  }

  // 创建卡片
  .create-card {
    @include theme-transition;
    background: $bg-color-white;
    border-radius: $border-radius-lg;
    box-shadow: $box-shadow-sm;
    border: 1px solid $border-color-light;
    overflow: hidden;

    // 卡片头部
    :deep(.el-card__header) {
      padding: 0;
      border-bottom: none;
    }

    .card-header {
      @include flex-column;
      align-items: center;
      text-align: center;
      padding: $spacing-2xl $spacing-xl $spacing-xl;
      background: linear-gradient(135deg, rgba($color-primary, 0.05) 0%, rgba($color-primary, 0.02) 100%);
      border-bottom: 1px solid $border-color-lighter;

      .header-icon {
        font-size: 48px;
        color: $color-primary;
        margin-bottom: $spacing-md;
      }

      .card-title {
        font-size: $font-size-2xl;
        font-weight: $font-weight-bold;
        color: $color-text-primary;
        margin: 0 0 $spacing-xs;
      }

      .card-subtitle {
        color: $color-text-secondary;
        margin: 0;
        font-size: $font-size-base;
        line-height: $line-height-normal;
      }
    }

    // 卡片主体
    :deep(.el-card__body) {
      padding: 0;
    }

    // 创建表单
    .create-form {
      padding: $spacing-2xl;

      // 表单分区
      .form-section {
        margin-bottom: $spacing-2xl;

        &:last-of-type {
          margin-bottom: $spacing-xl;
        }

        .section-title {
          @include flex-center;
          justify-content: flex-start;
          gap: $spacing-sm;
          font-size: $font-size-lg;
          font-weight: $font-weight-semibold;
          color: $color-text-primary;
          margin-bottom: $spacing-lg;
          padding-bottom: $spacing-sm;
          border-bottom: 2px solid $border-color-lighter;

          .el-icon {
            color: $color-primary;
            font-size: 20px;
          }
        }
      }

      // 表单标签样式
      .form-label {
        @include flex-center;
        justify-content: flex-start;
        gap: $spacing-xs;
        font-size: $font-size-base;
        font-weight: $font-weight-medium;
        color: $color-text-primary;

        .required-mark {
          color: $color-danger;
          margin-left: 2px;
        }
      }

      // Element Plus 表单项覆盖
      :deep(.el-form-item) {
        margin-bottom: $spacing-xl;

        .el-form-item__label {
          padding: 0;
          margin-bottom: $spacing-sm;
          font-size: $font-size-base;
          line-height: $line-height-normal;
        }

        // 输入框样式
        .el-input__wrapper {
          padding: 12px 16px;
          border-radius: $border-radius-base;
          box-shadow: 0 0 0 1px $border-color-base inset;
          transition: all $transition-fast;

          &:hover {
            box-shadow: 0 0 0 1px $color-primary-light-3 inset;
          }

          &.is-focus {
            box-shadow:
              0 0 0 1px $color-primary inset,
              0 0 0 3px rgba($color-primary, 0.1);
          }
        }

        // 文本域样式
        .el-textarea__inner {
          padding: 12px 16px;
          border-radius: $border-radius-base;
          font-family: $font-family-base;
          line-height: $line-height-relaxed;
          resize: vertical;
          border-color: $border-color-base;
          transition: all $transition-fast;

          &:hover {
            border-color: $color-primary-light-3;
          }

          &:focus {
            border-color: $color-primary;
            box-shadow: 0 0 0 3px rgba($color-primary, 0.1);
          }
        }

        // 字数统计
        .el-input__count {
          color: $color-text-quaternary;
          background: transparent;
        }
      }

      // 可见性选择器
      .visibility-group {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: $spacing-md;
        width: 100%;

        :deep(.el-radio) {
          @include theme-transition;
          border: 2px solid $border-color-light;
          border-radius: $border-radius-md;
          padding: $spacing-lg $spacing-md;
          margin: 0;
          height: auto;
          min-height: 100px;
          transition: all $transition-base;
          background: $bg-color-white;
          cursor: pointer;

          &:hover {
            border-color: $color-primary-light-2;
            background: rgba($color-primary, 0.02);
            transform: translateY(-2px);
            box-shadow: $box-shadow-sm;
          }

          &.is-checked {
            border-color: $color-primary;
            background: rgba($color-primary, 0.06);
            box-shadow: 0 0 0 3px rgba($color-primary, 0.1);

            .el-radio__input .el-radio__inner {
              border-color: $color-primary;
              background: $color-primary;
            }

            .radio-icon {
              color: $color-primary;
            }
          }

          .el-radio__input {
            margin-top: 2px;

            .el-radio__inner {
              width: 18px;
              height: 18px;
              border-width: 2px;
            }
          }

          .el-radio__label {
            width: 100%;
            padding: 0 0 0 $spacing-sm;
          }
        }

        .radio-wrapper {
          @include flex-center;
          justify-content: flex-start;
          width: 100%;
          gap: $spacing-md;

          .radio-icon {
            flex-shrink: 0;
            color: $color-text-secondary;
            font-size: 28px;
            transition: color $transition-fast;
          }

          .radio-content {
            flex: 1;
            text-align: left;

            .radio-title {
              display: block;
              font-size: $font-size-lg;
              font-weight: $font-weight-semibold;
              color: $color-text-primary;
              margin-bottom: $spacing-xs;
              line-height: $line-height-tight;
            }

            .radio-desc {
              margin: 0;
              font-size: $font-size-sm;
              color: $color-text-tertiary;
              line-height: $line-height-normal;
            }
          }
        }
      }

      // 邀请码设置提示
      .invite-settings {
        margin-top: $spacing-lg;
        animation: slideInDown $transition-base;

        :deep(.el-alert) {
          border-radius: $border-radius-base;
          background: rgba($color-info, 0.05);
          border: 1px solid rgba($color-info, 0.2);

          .el-alert__content {
            padding: 0;
          }

          .el-alert__title {
            font-size: $font-size-sm;
            font-weight: $font-weight-medium;
            color: $color-info;
          }

          .el-alert__description {
            font-size: $font-size-sm;
            color: $color-text-secondary;
            margin-top: $spacing-xs;
            line-height: $line-height-relaxed;
          }
        }
      }

      // 分割线
      :deep(.el-divider) {
        margin: $spacing-xl 0;
        background-color: $border-color-lighter;
      }

      // 按钮区域
      .form-actions {
        @include flex-center;
        justify-content: center;
        gap: $spacing-md;
        padding-top: $spacing-md;

        .el-button {
          min-width: 140px;
          height: 44px;
          font-size: $font-size-base;
          border-radius: $border-radius-base;
          transition: all $transition-fast;

          .el-icon {
            font-size: 18px;
          }
        }

        .cancel-btn {
          font-weight: $font-weight-medium;
          border-color: $border-color-base;
          color: $color-text-secondary;

          &:hover {
            border-color: $color-text-tertiary;
            color: $color-text-primary;
            background: $bg-color-hover;
          }
        }

        .submit-btn {
          font-weight: $font-weight-semibold;
          box-shadow: $box-shadow-sm;

          &:hover {
            transform: translateY(-2px);
            box-shadow: $box-shadow-base;
          }

          &:active {
            transform: translateY(0);
          }
        }
      }
    }
  }
}

// 响应式设计
@include respond-below(md) {
  .create-problem-set {
    padding: $spacing-md;

    .content-wrapper {
      .create-card {
        border-radius: $border-radius-base;

        .card-header {
          padding: $spacing-xl $spacing-lg;

          .header-icon {
            font-size: 40px;
          }

          .card-title {
            font-size: $font-size-xl;
          }

          .card-subtitle {
            font-size: $font-size-sm;
          }
        }

        .create-form {
          padding: $spacing-lg;

          .form-section {
            margin-bottom: $spacing-lg;

            .section-title {
              font-size: $font-size-base;
            }
          }

          // 小屏幕可见性选项纵向排列
          .visibility-group {
            grid-template-columns: 1fr;
            gap: $spacing-sm;

            :deep(.el-radio) {
              min-height: 80px;
              padding: $spacing-md;
            }

            .radio-wrapper {
              gap: $spacing-sm;

              .radio-icon {
                font-size: 24px;
              }

              .radio-content {
                .radio-title {
                  font-size: $font-size-base;
                }

                .radio-desc {
                  font-size: $font-size-xs;
                }
              }
            }
          }

          .form-actions {
            flex-direction: column;
            gap: $spacing-sm;

            .cancel-btn,
            .submit-btn {
              width: 100%;
              min-width: auto;
            }
          }
        }
      }
    }
  }
}

// 超小屏幕
@include respond-below(sm) {
  .create-problem-set {
    padding: $spacing-sm;

    .content-wrapper {
      .create-card {
        .card-header {
          padding: $spacing-lg $spacing-md;

          .header-icon {
            font-size: 36px;
          }

          .card-title {
            font-size: $font-size-lg;
          }
        }

        .create-form {
          padding: $spacing-md;

          :deep(.el-form-item) {
            margin-bottom: $spacing-md;

            .el-input__wrapper,
            .el-textarea__inner {
              padding: 10px 12px;
            }
          }
        }
      }
    }
  }
}
</style>
